<template>
  <view class="invoice">
    <view class="invoice-list">
      <view class="invoice-one">
        <view>{{ $t("submit.invoice") }}</view>
        <view>
          <view>普票(商品明细-个人)</view>
          <image :src="asyncImgs.my.icon_right_3" mode=""></image>
        </view>
      </view>
      <view class="invoice-one" @click="show = !show">
        <view class="invoice-one-left">
          <view>优惠券</view>
          <view>已选推荐优惠</view>
        </view>
        <view>
          <view>优惠￥90.00</view>
          <image :src="asyncImgs.my.icon_right_3" mode=""></image>
        </view>
      </view>
      <view class="invoice-one">
        <view>礼品卡</view>
        <view>
          <view>无可用</view>
          <image :src="asyncImgs.my.icon_right_3" mode=""></image>
        </view>
      </view>
    </view>

    <!-- 优惠券内容 -->
    <u-popup mode="bottom" v-model="show" border-radius="22">
      <!-- 标题部分 -->
      <view class="goodlist-top">
        <view>优惠券</view>
        <view>
          <view>使用说明</view>
          <image
            @click="show = !show"
            :src="asyncImgs.my.close"
            mode=""
          ></image>
        </view>
      </view>
      <!-- 标题部分 -->

      <view class="coupon-tar">
        <view>
          <view :class="selecttar == 1 ? 'coupon-tar-select' : 'coupon-tar-no'"
            >可用优惠券(1)</view
          >
          <view v-show="selecttar == 1">
            <view></view>
          </view>
        </view>
        <view>
          <view :class="selecttar == 2 ? 'coupon-tar-select' : 'coupon-tar-no'"
            >可用优惠券(1)</view
          >
          <view>
            <view v-show="selecttar == 2"></view>
          </view>
        </view>
      </view>
      <view class="coupon-item">
        <view class="coupon-item-title">
          <view>您已选中优惠券1张。共可抵用</view>
          <view>￥30.00</view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="confrim">
        <view>确定</view>
      </view>
      <!-- 底部按钮 -->
    </u-popup>
    <!-- 优惠券内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      selecttar: 1,
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
view {
  color: #262626;
  font-size: 26rpx;
}

.invoice {
  margin-top: 24rpx;
  padding: 40rpx 36rpx;
  border-radius: 22rpx;
  background-color: #ffffff;
}

.invoice-one {
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  > view:last-child {
    display: flex;
    align-items: center;

    image {
      margin-left: 20rpx;
      width: 12rpx;
      height: 20rpx;
    }
  }

  .invoice-one-left {
    display: flex;

    view:last-child {
      margin-left: 14rpx;
      font-size: 20rpx;
      color: #f22d14;
      border: 1rpx solid #f2280d;
      border-radius: 4rpx;
      padding: 4rpx 12rpx;
    }
  }
}

.invoice-one:last-child {
  margin-bottom: 0rpx;
}

.goodlist-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  > view:first-child {
    font-size: 36rpx;
    font-weight: bold;
  }

  > view:last-child {
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
    }

    image {
      margin-left: 24rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.coupon-tar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16rpx 36rpx;
  border-bottom: 1rpx solid #f2f2f2;

  > view {
    display: flex;
    flex-direction: column;
    align-items: center;

    .coupon-tar-no {
      color: #8c8c8c;
    }

    > view:last-child {
      margin-top: 12rpx;
      width: 56rpx;
      height: 6rpx;

      view {
        width: 100%;
        height: 100%;
        background-color: #f2270c;
      }
    }

    .coupon-tar-select {
      color: #262626;
      font-weight: bold;
    }
  }
}

.confrim {
  margin-top: 360rpx;
  padding: 12rpx 36rpx;

  view {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #f3150c, #f14b0c);
    border-radius: 38rpx;
  }
}

.coupon-item {
  padding: 0rpx 36rpx;

  .coupon-item-title {
    height: 80rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;

    > view:first-child {
      color: #383838;
    }

    > view:last-child {
      color: #f2270c;
    }
  }
}
</style>
